<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/demos.css" />
		<style type="text/css">
			.weui-navbar {
				display: block;
				width: 100px;
			}
			
			.weui-navbar .weui-navbar__item {
				width: 100px;	
			}
			
			.weui-tab .weui-tab__bd {
				padding-top: 0px;
				margin-left: 100px;
			}
			.header {
				height: 70px;
				background-color: #E50012;
			}
			
			.header .placeholder img {
				width: 70px;
			}
			
			.header .weui-flex__item .placeholder {
				background-color: white;
				border-radius: 5px;
				height: 35px;
				line-height: 35px;
				padding: 0px 3px;
			}
			
			.header {
				padding: 5px;
			}
			
			.header .weui-flex__item .placeholder input {
				display: block;
				height: 34px;
				line-height: 30px;
				width: 100%;
				font-size: 18px;
				border: 0px;
				outline: none;
				background: url(img/lp_sch_txt.png) left center no-repeat;
				background-size: 80px;
			}
			
			.header .weui-flex__item .placeholder div {
				margin: 0px 5px 0px 25px;
			}
			
			.weui-icon-search {
				float: left;
				margin-top: 10px;
			}
		</style>
	</head>


	<body>
		
		<div class="header">
						<div class="weui-flex">
							<div>
								<div class="placeholder"><img src="img/logo.png" /></div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<span class="weui-icon-search"></span>
									<div>
										<input type="text" name="" id="" value="" />
									</div>
								</div>
							</div>
						</div>
						<div class="weui-flex">
							<a href="typelist.html"><img src="img/typeico.png" /></a>
						</div>
					</div>
		
		<div class="weui-tab">
			<div class="weui-navbar">
				<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
					坚果炒货
				</a>
				<a class="weui-navbar__item" href="#tab2">
					肉脯鱼干
				</a>
				<a class="weui-navbar__item" href="#tab3">
					果干果脯
				</a>
				<a class="weui-navbar__item" href="#tab4">
					糕点糖果
				</a>
				<a class="weui-navbar__item" href="#tab5">
					素食山珍
				</a>
				<a class="weui-navbar__item" href="#tab6">
					花茶饮品
				</a>
			</div>
			<!--右侧-->
			<div class="weui-tab__bd">
				<!--1-->
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>1</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>2</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>3</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>4</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>5</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab2" class="weui-tab__bd-item">
					<h1>页面二</h1>
				</div>
				<div id="tab3" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>1</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>2</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>3</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>4</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>5</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab4" class="weui-tab__bd-item">
					<h1>页面4</h1>
				</div>
				<div id="tab5" class="weui-tab__bd-item">
					<h1>页面5</h1>
				</div>
				<div id="tab6" class="weui-tab__bd-item">
					<h1>页面6</h1>
				</div>
			</div>
		</div>


		<div class="weui-tabbar">
			<a href="index.html" class="weui-tabbar__item ">
				<!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_button.png" alt="">
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="typelist.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_msg.png" alt="">
				</div>
				<p class="weui-tabbar__label">分类</p>
			</a>
			<a href="cart.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_article.png" alt="">
				</div>
				<p class="weui-tabbar__label">购物车</p>
			</a>
			<a href="home.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_cell.png" alt="">
				</div>
				<p class="weui-tabbar__label">我的良品</p>
			</a>
		</div>
		<!--</div>-->
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	</body>


</html>